<template>
  <div>
    <el-carousel :interval="6000" type="card" height="380px">
      <el-carousel-item v-for="banner in banners" :key="banner.id" class="el-carousel__item">
        <a target="_blank" :href="banner.link">
          <el-image :src="banner.img_url" :alt="banner.title" class="elcarousel-img"/>
        </a>
      </el-carousel-item>
    </el-carousel>
    <div class="container">
      <header class="comm-title">
        <h2 class="tac">
          <span class="c-333">热门话题</span>
        </h2>
      </header>
      <article class="comm-course-list">
        <ul class="of" id="bna">
          <li v-for="content in discussions.contents" :key="content.id">
            <div class="cc-l-wrap">
              <section class="course-img">
                <img
                  :src="content.cover"
                  class="img-responsive"
                  :alt="content.title"
                  style="height: 150px; width: 267px"
                />
                <div class="cc-mask">
                  <a
                    :href="'/forum/' + content.id"
                    title="话题详情"
                    class="comm-btn c-btn-1"
                  >话题详情</a
                  >
                </div>
              </section>
              <h3 class="hLh30 txtOf mt10">
                <a
                  :href="'/forum/' + content.id"
                  :title="content.title"
                  class="course-title fsize18 c-333"
                >{{ content.title }}</a
                >
              </h3>
              <section class="mt10 hLh20 of">
                      <span class="fl jgAttr c-ccc f-fA">
                        <i class="c-999 f-fA">{{ Math.floor(Math.random() * (1000 - 1)) + 1 }}次浏览</i>
                        |
                        <i class="c-999 f-fA">{{ Math.floor(Math.random() * (1000 - 1)) + 1 }}次评论</i>
                      </span>
              </section>
            </div>
          </li>
        </ul>
        <div class="clear"></div>
      </article>
      <header class="comm-title">
        <h2 class="tac">
          <span class="c-333">热门文章</span>
        </h2>
      </header>
      <article class="comm-course-list">
        <ul class="of" id="bna">
          <li v-for="content in articles.contents" :key="content.id">
            <div class="cc-l-wrap">
              <section class="course-img">
                <img
                  :src="content.cover"
                  class="img-responsive"
                  :alt="content.title"
                  style="height: 150px; width: 267px"
                />
                <div class="cc-mask">
                  <a
                    :href="'/article/' + content.id"
                    title="文章详情"
                    class="comm-btn c-btn-1"
                  >文章详情</a
                  >
                </div>
              </section>
              <h3 class="hLh30 txtOf mt10">
                <a
                  :href="'/article/' + content.id"
                  :title="content.title"
                  class="course-title fsize18 c-333"
                >{{ content.title }}</a
                >
              </h3>
              <section class="mt10 hLh20 of">
                      <span class="fl jgAttr c-ccc f-fA">
                        <i class="c-999 f-fA">{{ Math.floor(Math.random() * (1000 - 1)) + 1 }}次浏览</i>
                        |
                        <i class="c-999 f-fA">{{ Math.floor(Math.random() * (1000 - 1)) + 1 }}次评论</i>
                      </span>
              </section>
            </div>
          </li>
        </ul>
        <div class="clear"></div>
      </article>
      <header class="comm-title">
        <h2 class="tac">
          <span class="c-333">热门分享</span>
        </h2>
      </header>
      <article class="comm-course-list">
        <ul class="of" id="bna">
          <li v-for="content in shares.contents" :key="content.id">
            <div class="cc-l-wrap">
              <section class="course-img">
                <img
                  :src="content.cover"
                  class="img-responsive"
                  :alt="content.title"
                  style="height: 150px; width: 267px"
                />
                <div class="cc-mask">
                  <a
                    :href="'/share/' + content.id"
                    title="分享详情"
                    class="comm-btn c-btn-1"
                  >分享详情</a
                  >
                </div>
              </section>
              <h3 class="hLh30 txtOf mt10">
                <a
                  :href="'/share/' + content.id"
                  :title="content.title"
                  class="course-title fsize18 c-333"
                >{{ content.title }}</a
                >
              </h3>
              <section class="mt10 hLh20 of">
                      <span class="fl jgAttr c-ccc f-fA">
                        <i class="c-999 f-fA">{{ Math.floor(Math.random() * (1000 - 1)) + 1 }}次浏览</i>
                        |
                        <i class="c-999 f-fA">{{ Math.floor(Math.random() * (1000 - 1)) + 1 }}次评论</i>
                      </span>
              </section>
            </div>
          </li>
        </ul>
        <div class="clear"></div>
      </article>
    </div>
  </div>
</template>

<script>
import banner from '@/api/banner'
import content_api from '@/api/content'

export default {
  layout: 'base_layout',
  data () {
    return {
      discussions: {
        total: 0,
        contents: [],
      },
      articles: {
        total: 0,
        contents: [],
      },
      shares: {
        total: 0,
        contents: [],
      },
      query_obj: {
        title_contains: '',
        page_no: 1,
        page_size: 8,
        content_type: 2,
        sport_label_ids: [],
        university_label_ids: [],
      },
      swiperOption: {
        //配置分页
        pagination: {
          el: '.swiper-pagination', //分页的dom节点
        },
        //配置导航
        navigation: {
          nextEl: '.swiper-button-next', //下一页dom节点
          prevEl: '.swiper-button-prev', //前一页dom节点
        },
      },
      banners: {}, //轮播图
    }
  },

  created () {
    this.initBanner()
    this.init_contents()
  },
  methods: {
    init_contents () {
      this.query_obj.content_type = 2
      this.get_discussions()
      this.query_obj.content_type = 1
      this.get_articles()
      this.query_obj.content_type = 3
      this.get_shares()
    },
    get_discussions () {
      content_api.get_contents(this.query_obj).then((response) => {
        if (response.data.success) {
          this.discussions.total = response.data.content.total
          this.discussions.contents = response.data.content.contents
        } else {
          this.$message.error('获取数据失败！')
        }
      })
    },
    get_articles () {
      content_api.get_contents(this.query_obj).then((response) => {
        if (response.data.success) {
          this.articles.total = response.data.content.total
          this.articles.contents = response.data.content.contents
        } else {
          this.$message.error('获取数据失败！')
        }
      })
    },
    get_shares () {
      content_api.get_contents(this.query_obj).then((response) => {
        if (response.data.success) {
          this.shares.total = response.data.content.total
          this.shares.contents = response.data.content.contents
        } else {
          this.$message.error('获取数据失败！')
        }
      })
    },
    initBanner () {
      banner.getAllBanner().then((response) => {
        if (response.data.success) {
          this.banners = response.data.content.banners
        } else {
          this.$message.error('获取轮播图失败！')
        }
      })
    },
  },
}
</script>

<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.elcarousel-img {
  width: 100%;
  height: 100%;
}
</style>
